﻿@{
    ViewBag.Title = "Examing";
    Layout = "~/Views/Shared/_TreeLayout.cshtml";
}
<link href="~/CSS/style.css" rel="stylesheet" />
<input type="hidden" value="@ViewBag.total" id="maxTopic"/>
<input type="hidden" value="@ViewBag.paper.Id" id="paperId" />
<div class="col-md-12">
    <h1>《@ViewBag.paper.STestName》<small>正在考试</small></h1>
    <!--考试倒计时-->

    <div style="width: 165px; float: right; margin-top: -2%">

        <div id="dashboard" class="TIE-fighter-dashboard">

            <div class="TIE-fighter-dash TIE-fighter-hours_dash">
                <span class="TIE-fighter-dash_title">小时</span>
                <div class="TIE-fighter-digit">0</div>
                <div class="TIE-fighter-digit">0</div>
            </div>
            <div class="TIE-fighter-dash TIE-fighter-minutes_dash">
                <span class="TIE-fighter-dash_title">分钟</span>
                <div class="TIE-fighter-digit">0</div>
                <div class="TIE-fighter-digit">0</div>
            </div>
            <div class="TIE-fighter-dash TIE-fighter-seconds_dash">
                <span class="TIE-fighter-dash_title">秒</span>
                <div class="TIE-fighter-digit">0</div>
                <div class="TIE-fighter-digit">0</div>
            </div>
        </div>
    </div>
    <!--倒计时 end-->

    <hr />
    <input type="hidden" value="1" id="currentNo" />
    <input type="hidden" value="0" id="detailId" />
    <input type="hidden" value="@ViewBag.timeList[0]" id="starTime" />
    <input type="hidden" value="@ViewBag.timeList[1]" id="endTime" />
    <input type="hidden" value="@ViewBag.testSurplusTime" id="testSurplusTime" />


    <div class="col-md-7" style="border: 1px solid red; height: 500px; margin: 0px 30px;">
        <strong data-bind="text:title" style="font-size: 30px;margin-bottom:20px;"></strong>
        <br style="margin:30px 0px;">

        <form class="smart-form" data-bind="foreach:options">
            <label data-bind="attr:{ class: $root.typeClass}">
                <input name="select" data-bind="value:Id,attr:{type:$root.stype}">
                <i></i>
                <span data-bind="text:SOptionName" style="font-size: 20px;"></span>
            </label>
        </form>

    </div>
    <div class="col-md-4" style="border: 1px solid black; height: 546px; float: right;">
        @{
            int i = 0; int j = 1;
            string[] strNo = { "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一",
                             "十二","十三","十四","十五","十六","十七","十八","十九","二十","二十一",
                             "二十二","二十三","二十四","二十五","二十六","二十七","二十八","二十九","三十"};
            foreach (var item in ViewBag.strategy)
            {
                
            <p>@strNo[i]</p>
            
                
                foreach (var item1 in ViewBag.detail)
                {
                    if (item1.IStrategyId == item.Id)
                    {
                        //题库的Id：试卷中的题木Id：所属的策略Id
                        string val = item1.ILibId + ":" + item1.Id + ":" + item1.IStrategyId;                     
            <button name="Topic" type="button" class="btn btn-info" value="@val" style="margin: 3px 3px;">
                @j
            </button>
                        j++;
                    }
                }
            <hr />
                i++;
            }
        }
    </div>
    <button class="btn btn-primary" data-bind="click:$root.complete" style="margin-top: 1%;margin-left:5%;">提交答卷</button>

    <button class="btn btn-success" data-bind="click:$root.last" style="margin-top: 1%; margin-left: 35%">上一题</button>
    <button class="btn btn-success" data-bind="click:$root.next" style="margin-top: 1%;">下一题</button>
    
</div>

<script src="~/Scripts/jquery.t-countdown.js"></script>
<script type="text/javascript">
    var colomatduration = 'fast';
    var colomatslideEffect = 'slideFade';
    var colomatcookielife = 7;
    $(function () {
        var paperId = $("#paperId").val();
        var maxTopic = $("#maxTopic").val();
        var topicButton = $("button[name='Topic']");




        function MyViewModel() {
            var self = this;
            self.title = ko.observable();//题目内容
            self.options = ko.observableArray();//选项
            self.type = ko.observable();//题目类型
            self.stype = ko.observable();//checkbox and radio
            self.typeClass = ko.observable();//input样式
            self.LibId = ko.observable();

            //上一题
            self.last = function () {
                if ($("#currentNo").val() == 1 || $("#currentNo").val() == 0) {
                    alert("请点击下一题或选择其他题目");
                    return false;
                }
                else {
                    var val = 0;
                    var detailId = 0;
                    var oldNo = $("#currentNo").val();
                    var currentNo = oldNo - 1;
                    $("#currentNo").val(currentNo);

                    topicButton.each(function (i) {
                        if ($(this).text().trim() == currentNo) {
                            val = $(this).val().split(":")[0];//得到题库中题目Id
                            detailId = $(this).val().split(":")[1];//得到试卷中的题目Id
                        }

                    });
                    $("#detailId").val(detailId);
                    $.ajax({
                        url: "/Api/Exam/SearchTopic",
                        type: "POST",
                        data: {
                            LibId:val,
                            PaperId: paperId
                        }
                    }).done(function (data) {
                        var title = currentNo + "." + data.lib.STitle;
                        self.type(data.lib.IProblemType);
                        self.title(title);
                        self.options(data.options);
                        if (data.answer != null)
                        {
                            var anList = data.answer.split(":");
                            $.each(anList, function (i, val) {
                                if (val != "")
                                {
                                    $("input[name='select'][value='" + val + "']").attr("checked", "true");
                                }
                            });
                        }
                    }).fail(function () {
                        alert("请重新点击");
                    });
                }
            }

            //下一题
            self.next = function () {
                if ($("#currentNo").val() == maxTopic) {
                    alert("已经到了最后一题,请认真检查！");
                    return false;//若为最后一题，结束函数
                }
                else {
                    var val = 0;//TestLib题目ID
                    var oldDetailId = $("#detailId").val();
                    var newDetailId = 0;//PaperDetail中的ID
                    var oldStrategyId = 0;
                    var answer = "";//答案
                    var oldNo = $("#currentNo").val();
                    var currentNo = parseInt(oldNo) + 1;
                    var thisButton;//当前按钮
                    var buValue = "";//当前按钮的value
                    $("#currentNo").val(currentNo);//记录当前题号



                    //找到当前题的Id
                    topicButton.each(function (i) {
                        //下一题信息
                        if ($(this).text().trim() == currentNo) {
                            val = $(this).val().split(":")[0];//得到题库中题目Id
                            newDetailId = $(this).val().split(":")[1];//得到试卷中的题目Id
                        }
                        //当前题信息
                        if ($(this).text().trim() == oldNo) {
                            oldNo = $(this).val().split(":")[0];//得到上一题的Id
                            oldStrategyId = $(this).val().split(":")[2];
                            buValue = $(this).val();
                            thisButton = $("button[name='Topic'][value='" + buValue + "']");//找到当期按钮
                        }

                    });
                    $("#detailId").val(newDetailId);//记录当前题的detailId

                    $("input[name='select']:checked").each(function (i) {
                        answer = answer + "," + $(this).val();//拼装答案
                    });

                    answer = dropRsplit(answer, ",");
                    $.ajax({
                        url: "/Api/Exam/NextTopic",
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            NextLibId: val, Answer: answer,
                            DetailId: oldDetailId, LibId: oldNo, StrategyId: oldStrategyId,
                            PaperId: paperId
                        }
                    }).done(function (data) {
                        var title = currentNo + "." + data.lib.STitle;
                        self.type(data.lib.IProblemType);
                        self.title(title);
                        self.options(data.options);
                        if (data.answer != null) {
                            var anList = data.answer.split(":");
                            $.each(anList, function (i, val) {
                                if (val != "") {
                                    $("input[name='select'][value='" + val + "']").attr("checked", "true");
                                }
                            });
                        }
                        if (answer != "") {
                            thisButton.removeClass("btn-info");
                            thisButton.addClass("btn-success");
                        }
                    }).fail(function () {
                        alert("请重新点击");
                    });
                }
            }

            //根据题目类型，绑定class及type
            ko.computed(function () {
                if (self.type() == 2) {
                    self.stype("checkbox");
                    self.typeClass("checkbox");
                    return false;
                }
                else {
                    self.stype("Radio");
                    self.typeClass("radio")
                }
            });


            //提交试卷
            self.complete = function () {
                if (confirm("确定提交答卷？"))
                {
                    if (!confirm("再次确定提交答卷？")) {
                        return false;
                    }
                }
                var oldDetailId = $("#detailId").val();
                var answer = "";
                var oldStrategyId = 0;
                var oldNo = $("#currentNo").val();
                //找到当前题的Id
                topicButton.each(function (i) {
                    if ($(this).text().trim() == oldNo) {
                        oldNo = $(this).val().split(":")[0];//得到最后一题的ID
                        oldStrategyId = $(this).val().split(":")[2];
                    }

                });

                $("input[name='select']:checked").each(function (i) {
                    answer = answer + "," + $(this).val();//拼装答案
                });

                answer = dropRsplit(answer, ",");
                $.ajax({
                    url: "/Api/Exam/Complete",
                    type: "POST",
                    dataType: "JSON",
                    data: {
                        Answer: answer, DetailId: oldDetailId, LibId: oldNo, StrategyId: oldStrategyId,
                        PaperId:paperId
                    }
                }).done(function (data) {
                    if (data != "") {
                        alert("提交成功");
                        window.location.href = "/Login/Commonuser";
                    }
                }).fail(function () {
                    alert("请重新点击");
                });
            }

        };

        var Model = new MyViewModel();

        //默认显示第一到题
        //找到第一道题的Id；
        var No1 = 0;
        var DetailId1 = 0;
        topicButton.each(function (i) {
            if ($(this).text().trim() == 1) {
                No1 = $(this).val().split(":")[0];
                DetailId1 = $(this).val().split(":")[1];//得到试卷中的题目Id
            }
        });
        //获取第一道题
        $.ajax({
            url: "/Api/Exam/SearchTopic",
            type: "POST",
            dataType: "JSON",
            data: { LibId: No1 }
        }).done(function (data) {
            var title = 1 + "." + data.lib.STitle;
            Model.type(data.lib.IProblemType);
            Model.title(title);
            Model.options(data.options);
            $("#detailId").val(DetailId1);//记录当前题的detailId
        });


        ko.applyBindings(Model);

        //点击题号，获取题目
        $("button[name='Topic']").click(function () {
            var oldNo = $("#currentNo").val();
            var val = $(this).val().split(":")[0];//当前题目Id
            var detailId = $(this).val().split(":")[1];
            var oldStrategyId = 0;
            var oldDetailId = $("#detailId").val();
            var answer = "";//答案
            $("#currentNo").val($(this).text().trim());//当前题目序号

            $("#detailId").val(detailId);

            $("input[name='select']:checked").each(function (i) {
                answer = answer + "," + $(this).val();
            });
            //找到当前题的Id
            topicButton.each(function (i) {
                if ($(this).text().trim() == oldNo) {
                    oldNo = $(this).val().split(":")[0];//得到前一题的ID
                    oldStrategyId = $(this).val().split(":")[2];
                    buValue = $(this).val();
                    thisButton = $("button[name='Topic'][value='" + buValue + "']");//找到当期按钮
                }
            });
            
            answer = dropRsplit(answer, ",");//去掉开头的逗号
            //页面开始默认为第一题！
            $.ajax({
                url: "/Api/Exam/NextTopic",
                type: "POST",
                dataType: "JSON",
                data: { NextLibId: val, Answer: answer, DetailId: oldDetailId, LibId: oldNo, StrategyId: oldStrategyId, PaperId: paperId }
            }).done(function (data) {
                var title = $("#currentNo").val() + "." + data.lib.STitle;
                Model.type(data.lib.IProblemType);
                Model.title(title);
                Model.options(data.options);
                if (data.answer != null) {
                    var anList = data.answer.split(":");
                    $.each(anList, function (i, val) {
                        if (val != "") {
                            $("input[name='select'][value='" + val + "']").attr("checked", "true");
                        }
                    });
                }
                if (answer != "") {
                    thisButton.removeClass("btn-info");
                    thisButton.addClass("btn-success");
                }
            }).fail(function () {
                alert("请重新点击");
            });
        });

        //考试倒计时js；

        var starTimeStr = $("#starTime").val();
        var starTime = new Date(starTimeStr);

        var day = parseInt(starTime.getDate());
        var month = parseInt(starTime.getMonth()) + 1;
        var year = parseInt(starTime.getFullYear());
        var hour = parseInt(starTime.getHours());
        var min = parseInt(starTime.getMinutes());
        var sec = parseInt(starTime.getSeconds());
        starTimeStr = month + "/" + day + "/" + year + "/" + " " + hour + ":" + min + ":" + sec;

        var endTimeStr = $("#endTime").val();
        var endTime = new Date(endTimeStr);

        day = parseInt(endTime.getDate());
        month = parseInt(endTime.getMonth()) + 1;
        year = parseInt(endTime.getFullYear());
        hour = parseInt(endTime.getHours());
        min = parseInt(endTime.getMinutes());
        sec = parseInt(endTime.getSeconds());

        jQuery('#dashboard').countDown({
            targetDate: {
                'day': endTime.getDate(),
                'month': endTime.getMonth() + 1,
                'year': endTime.getFullYear(),
                'hour': endTime.getHours(),
                'min': endTime.getMinutes(),
                'sec': endTime.getSeconds(),
                'localtime': starTimeStr

            },
            style: 'TIE-fighter',
            launchtarget: 'countdown',
            omitWeeks: 'false'
				, onComplete: function () {
				    var oldDetailId = $("#detailId").val();
				    var answer = "";
				    var oldStrategyId = 0;
				    var oldNo = $("#currentNo").val();
				    //找到当前题的Id
				    topicButton.each(function (i) {
				        if ($(this).text().trim() == oldNo) {
				            oldNo = $(this).val().split(":")[0];//得到最后一题的ID
				            oldStrategyId = $(this).val().split(":")[2];
				        }

				    });

				    $("input[name='select']:checked").each(function (i) {
				        answer = answer + "," + $(this).val();//拼装答案
				    });

				    answer = dropRsplit(answer, ",");
				    $.ajax({
				        url: "/Api/Exam/Complete",
				        type: "POST",
				        dataType: "JSON",
				        data: { Answer: answer, DetailId: oldDetailId, LibId: oldNo, StrategyId: oldStrategyId }
				    }).done(function (data) {
				        if (data != "") {
				            alert("考试时间结束！，自动提交试卷，提交成功！");
				        }
				        window.location.href = "/Login/Commonuser";
				    })
				}
        });
    });
    function dropRsplit(a, splitC) {
        var tmpA = a.split(splitC);
        var tmpObj = new Array();
        for (var i = 0; i < tmpA.length; i++) {
            if (tmpA[i] != "") {
                tmpObj.push(tmpA[i]);
            }

        }
        return tmpObj.join(splitC);
    }



</script>
